<title>系统用户 - 数据表格</title>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">数据操作</div>
                <div class="layui-card-body">

                    <table class="layui-hide" id="table" lay-filter="table-filter"></table>
                    <script type="text/html" id="operate_btn">
                        <div class="layui-btn-container">
                            <button class="layui-btn" lay-event="add">添加</button>
                            <button class="layui-btn layui-btn-danger" lay-event="batchDel">批量删除</button>
                        </div>
                    </script>
                    <!--<div style="padding-bottom: 10px;" id="operate_btn">-->
                    <!--<button class="layui-btn" data-type="add">添加</button>-->
                    <!--<button class="layui-btn layui-btn-danger" data-type="batchDel">批量删除</button>-->
                    <!--</div>-->

                    <script type="text/html" id="table-operate">
                        <a class="layui-btn layui-btn-xs" lay-href="/sys/user/details/id={{ d.id }}">查看</a>
                        <!--<a class="layui-btn layui-btn-xs" lay-href="/sys/view/user_edit/id={{d.id}}">编辑</a>-->
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'table'], function () {
        var table = layui.table
            , $ = layui.$
            , admin = layui.admin
            , form = layui.form
            , view = layui.view
            , tableId = "table";
        table.render({
            elem: '#' + tableId
            , url: '/sys/user/list'
            // ,width: admin.screen() > 1 ? 892 : ''
            // ,height: 332
            //开启头部工具栏
            , toolbar: '#operate_btn'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                , {field: 'userName', title: '用户名称'}
                , {field: 'userAmount', title: '登录账号'}
                , {
                    field: 'roles', title: '拥有角色', templet: function (d) {
                        var roles = "";
                        var roleList = d.roleList;
                        if (roleList) {
                            for (var item in roleList) {
                                roles += roleList[item].roleName + ",";
                            }
                            roles = remove_last_char(roles);
                        }
                        return roles;
                    }
                }
                , {field: 'gmtTime', title: '创建时间'}
                , {width: 178, align: 'center', fixed: 'right', title: '操作', toolbar: '#table-operate'}
            ]]
            , page: true
            , limit: 10
            , limits: [10, 15, 20, 25, 30]
            , text: '对不起，加载出现异常！'
        });

        //监听工具条
        table.on('tool(table-filter)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'del':
                    layer.confirm('真的删除行么', function (index) {
                        admin.req({
                            url: '/sys/user/del'
                            , type: 'post'
                            , data: {ids: data.id}
                            , done: function (res) {
                                layer.msg(res.msg)
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                            }
                        });
                    });
                    break;
                case 'edit':
                    common('编辑用户信息', 'content-edit', '/sys/user/eidt', 'post', data);
                    break;
                case 'batchDel':
                    var checkStatus = table.checkStatus(tableId)
                        , checkData = checkStatus.data; //得到选中的数据
                    var length = checkData.length;
                    if (length === 0) {
                        return layer.msg('请选择数据');
                    }
                    var ids = ''
                    for (item in checkData) ids += checkData[item]["id"] + ",";
                    layer.confirm('确定删除这 ' + length + ' 条数据吗？', function () {
                        admin.req({
                            url: '/sys/user/del'
                            , type: 'post'
                            , data: {ids: ids}
                            , done: function (res) {
                                layer.msg(res.msg)
                                table.reload(tableId);
                            }
                        });
                    });
                    break;
                case 'add':
                    common('添加用户信息', 'content-add', '/sys/user/save', 'post');
                    break;
            }
        });

        table.on('toolbar(table-filter)', function (obj) {
            switch (obj.event) {
                case 'batchDel':
                    var checkStatus = table.checkStatus(tableId)
                        , checkData = checkStatus.data; //得到选中的数据
                    var length = checkData.length;
                    if (length === 0) {
                        return layer.msg('请选择数据');
                    }
                    var ids = ''
                    for (item in checkData) ids += checkData[item]["id"] + ",";
                    layer.confirm('确定删除这 ' + length + ' 条数据吗？', function () {
                        admin.req({
                            url: '/sys/user/del'
                            , type: 'post'
                            , data: {ids: ids}
                            , done: function (res) {
                                layer.msg(res.msg)
                                table.reload(tableId);
                            }
                        });
                    });
                    break;
                case 'add':
                    common('添加用户信息', 'content-add', '/sys/user/save', 'post');
                    break;
            }
        });


        function common(title, id, url, ajaxType, data) {
            admin.popup({
                title: title
                , area: ['450px', '550px']
                , id: id
                , success: function (layero, index) {
                    view(this.id).render('sys/user/model').done(function () {

                        $("#role_checkbox").html('');
                        admin.req({
                            url: '/sys/role/get/roles'
                            , async: false
                            , done: function (res) {
                                var html = '';
                                for (var item in res.data) {
                                    html += ('<input type="checkbox" value="' + res.data[item].id + '" title="' + res.data[item].roleName + '" lay-skin="primary"/>')
                                }
                                $("#role_checkbox").html(html)
                            }
                        });
                        //初始化弹框
                        form.render(null, 'model-filter');
                        var picture_html;
                        if (data) {
                            console.log(data)
                            //修改
                            picture_html = '<img  class="layui-upload-img" style="width:272px;height:auto;" src="' + data.picture + '">';
                            var roles = data.roleList;
                            for (var item in roles) {
                                $("[value='" + roles[item].id + "']").prop("checked", 'true')
                            }
                            //渲染数据
                            form.val('model-filter', data)
                            $("#user_pwd_div").addClass("layui-hide");
                        } else {
                            picture_html = "";
                            $("#user_pwd_div").removeClass("layui-hide");
                        }
                        $("#picture_model").html(picture_html);
                        //重新渲染弹框
                        form.render();
                        //监听提交
                        form.on('submit(submit-filter)', function (data) {
                            var roleIds = "";
                            $("#role_checkbox input:checked").each(function (i) {
                                roleIds += $(this).val() + ",";
                            });
                            data.field.roleIds = roleIds;
                            admin.req({
                                url: url
                                , type: ajaxType
                                , data: data.field
                                , done: function (res) {
                                    layer.msg(res.msg);
                                    table.reload(tableId); //重载表格
                                    layer.close(index); //执行关闭
                                }
                            });
                        });
                    });
                }
            });
        }

    });
</script>